{% extends "base.html" %}

{% load umap_tags i18n %}

{% block body_class %}
  content
{% endblock body_class %}
{% block extra_head %}
  {% umap_css %}
  {{ block.super }}
  {% umap_js %}
{% endblock extra_head %}
{% block header %}
  <header class="wrapper row">
    {% include "umap/navigation.html" with title=SITE_NAME %}
  </header>
  {% block messages %}
    {% include "umap/messages.html" with title=SITE_NAME %}
  {% endblock messages %}
{% endblock header %}
{% block content %}
  {% if UMAP_READONLY %}
    <div class="wrapper demo-instance-warning">
      <div class="row">
        <p>
          {% blocktrans %}This instance of uMap is currently in read only mode, no creation/edit is allowed.{% endblocktrans %}
        </p>
      </div>
    </div>
  {% endif %}
  {% if UMAP_DEMO_SITE %}
    <div class="wrapper demo-instance-warning">
      <div class="row">
        {% blocktrans with repo_url="https://github.com/umap-project/umap" stable_url="http://umap.openstreetmap.fr" %}This is a demo instance, used for tests and pre-rolling releases. If you need a stable instance, please use <a href="{{ stable_url }}">{{ stable_url }}</a>. You can also host your own instance, it's <a href="{{ repo_url }}">open source</a>!{% endblocktrans %}
      </div>
    </div>
  {% endif %}
  {% block maincontent %}
  {% endblock maincontent %}
{% endblock content %}
{% block bottom_js %}
  {{ block.super }}
  <script type="text/javascript">
    window.addEventListener('DOMContentLoaded', event => {
      const server = new U.ServerRequest()
      const getMore = async function (link) {
        const container = link.parentNode
        container.removeChild(link)
        const [{html}, response, error] = await server.get(link.href)
        if (!error) {
          const template = document.createElement('template')
          template.innerHTML = html
          container.appendChild(template.content)
          listenForMore()
        }
      }
      const listenForMore = () => {
        const more = document.querySelector('.more_button')
        if (more) {
          L.DomEvent.on(more, 'click', (e) => {
            L.DomEvent.stop(e)
            getMore(more)
          })
        }
      }
      listenForMore()
    })
  </script>
{% endblock bottom_js %}
{% block footer %}
  {{ block.super }}
  {% include "umap/content_footer.html" %}
{% endblock footer %}
